[제이쿼리] 부모요소 선택하는 방법 parent(), parents(), closest()

제이쿼리(jQuery)를 사용하여 부모요소를 선택하거나 찾는 방법을 알아봅니e다. 어떻게 해야할까요? 부모 요소에 접근하는 다양한 방법에 대하여 알아보고자 합니다.

# 제이쿼리를 사용하여 부모요소 선택, 찾는 방법

먼저 부모 요소를 선택하는 방법은 제이쿼리에도 몇 가지가 있습니다. 그 중에서 가장 자주 사용되는 방법으로 아래의 세가지 메소드가 대표적입니다.

parent()
parents()
closest()


이와같이 위 메소드를 사용하면 간단하게 부모요소를 선택할 수 있습니다. 그럼 어떻게 사용하고 각각의 메소드의 차이점은 무엇인지 알아봅니다.

모두 부모형제를 찾기 위한 방법이나 그 차이점이 존재합니다. 먼저 parent()의 경우부터 알아봅니다.

! parent() 메소드 알아보기

먼저 parent()는 가장 많이 사용되는 아주 간단한 방법입니다. parent()는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 위 예제에서는 실행할 경우 p태그를 반환할 것입니다. parent()는 인접한 하나의 요소를 반환하는 것이 특징입니다.

! parent() 예제소스 보기

그렇다면 예제를 통해 자세히 알아볼까요? 아래 예제는 현재 태그 요소의 바로 위 부모 요소를 가져오는 예제입니다.
@ parent.html

위 html은 예제에 사용된 html입니다. 아래는 스크립트 코드입니다.

@parent.js

위 코드를 실행하면 span 태그에 사용된 parent() 메소드로 바로 위의 부모 요소인 p 태그를 가져와 출력합니다.

! parents() 메소드 알아보기

만약 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용합니다. 모든 요소를 반환한다는 점을 빼고는 parent()와 동일합니다. 아래 예제를 봐주세요.

@parents.js

! closest() 메소드 알아보기

이번에 알아볼 closest() 메소드 역시 가장 많이 사용되는 메소드 중 하나입니다.  closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있습니다. 예를들어 아래처럼 span 태그의 부모 요소중 div 태그를 가져올 수 있습니다.

@ closest.js

이처럼 부모 요소들 중에서 원하는 요소만 선택하여 가져올 수 있습니다.

# 마치면서

여기까지 제이쿼리에서 부모요소에 접근하는 다양한 방법을 알아보았습니다. 이처럼 많은 메소드를이 존재하며 부모 요소 중에서도 원하는 요소만 선택.. 접근하는 것 역시 가능합니다. 매우 중요하며 자주 사용되므로 꼭 알아둘 필요가 있습니다.